<!--
 * @Author: LiuYan
 * @Date: 2022-12-15 15:46:33
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-07 10:26:08
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en" id="root">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" /> -->
  <style>
    @import url(../common/css/coommon.css);
  </style>
</head>

<body>
  <br />
  <div class="descriptions">
    <div class="span" style="width: 16.75%">需求编号</div>
    <div class="span" style="width: 16.75%">202209280001</div>
    <div class="span" style="width: 16.75%">发起人</div>
    <div class="span" style="width: 16.75%">发起部门</div>
    <div class="span" style="width: 16.75%">商务部</div>
    <div class="span" style="width: 16.75%">某某某</div>
    <div class="span" style="width: 16.75%">项目名称</div>
    <div class="span" style="width: 83.35%">请输入项目名称</div>
    <div class="span" style="width: 16.75%;height: 100px;">业务范围</div>
    <div class="span" style="width: 83.35%;height: 100px;"></div>
  </div>
  <button class="button_primary">button_primary</button>
  <button class="button_primary_empty">button_primary_empty</button>
  <button class="button_info">button_info</button>
  <button class="button_primary_plain">button_primary_plain</button>
  <button class="button_success_plain">button_success_plain</button>
  <button class="button_success_plain_other">button_success_plain_other</button>
  <button class="button_warning_plain">button_warning_plain</button>
  <button class="button_warning">button_warning</button>
  <button class="button_error">button_error</button>
  <button class="button_success">button_success</button>
  <button class="button_primary_text">button_primary_text</button>
  <button class="button_error_text">button_error_text</button>
  <button class="button_warning_text">button_warning_text</button>
  <button class="button_info_text">button_info_text</button>
  <button class="button_success_text">button_success_text</button>
  <button class="success_pass">success_pass</button>
  <button class="error_pass">error_pass</button>
  <button class="button_primary_text button_link">button_link</button>
  <button class="button_primary button_icon"><i class="bi bi-search btnIcon"></i>搜索</button>
  <button class="button_primary_plain button_icon"><i class="bi bi-arrow-clockwise btnIcon"></i>重置</button>
  <br />
  <div class="select-group">
    <label>选择框</label>
    <div class="options">
      <input placeholder="输入关键字" />
      <ul>
        <li>输入关键字</li>
        <li>输入关键字</li>
        <li>输入关键字</li>
        <li>输入关键字</li>
      </ul>
    </div>
  </div>
  <br />
  <div class="input-group">
    <label>输入框</label>
    <input placeholder="输入关键字" />
  </div>
  <div class="textarea-group">
    <label>输入框</label>
    <textarea rows="4" placeholder="请输入..."></textarea>
  </div>
  <div class="upload-group">
    <label>上传附件</label>
    <div class="upload_button">
      <div class="upload_out">
        <img src="./common/img/upload_blue.png" alt="">上传文件
        <input type="file">
      </div>
      <div class="upload_tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
    </div>
  </div>
  <br />
  <div class="table">
    <div class="table-header">
      <div class="tr">
        <div class="td" style="width: 15%">预警时间</div>
        <div class="td center" style="width: 10%">预警类型</div>
        <div class="td center" style="width: 10%">所属项目</div>
        <div class="td center" style="width: 10%">商务经理</div>
        <div class="td center" style="width: 10%">售前经理</div>
        <div class="td center" style="width: 10%">处理状态</div>
        <div class="td" style="width: 15%">操作</div>
      </div>
    </div>
    <div class="table-body">
      <div class="tr">
        <div class="td" style="width: 15%">2022-11-17 14:39</div>
        <div class="td center" style="width: 10%">临期未签约</div>
        <div class="td center" style="width: 10%">聚达项目</div>
        <div class="td center" style="width: 10%">周晓咏</div>
        <div class="td center" style="width: 10%">周校民</div>
        <div class="td center" style="width: 10%">
          <button class="button_warning_text">待处理</button>
        </div>
        <div class="td" style="width: 15%">
          <button class="button_success_text">处理</button>
          &ensp;
          <button class="button_primary_text">查看</button>
        </div>
      </div>
    </div>
  </div>
  <div class="tab_button">
    <button class="button_primary">全部审批</button>
    <button class="button_primary_plain">成本概算</button>
    <button class="button_primary_plain">采购审批</button>
    <button class="button_primary_plain">终验审批</button>
    <button class="button_primary_plain">采购计划</button>
  </div>
  <div class="detailTable">
    <div class="col_12">
      <div class="col_tips">项目名称</div>
      <div class="col_text">xxxxxxxxxxxxxxx项目</div>
    </div>
    <div class="col_12">
      <div class="col_tips">申请人</div>
      <div class="col_text">xxxx</div>
    </div>
    <div class="col_12">
      <div class="col_tips">提交日期</div>
      <div class="col_text">2022-11-16 14:57:00</div>
    </div>
    <div class="col_12">
      <div class="col_tips">附件</div>
      <div class="col_text"><button class="button_primary_text button_link">某某某某某某项目成本概算.excl</button></div>
    </div>
  </div>
  </div>
  <br />
  <label class="switch">
    <input type="checkbox" />
    <span class="slider"></span>
  </label>
  <div class="pagination">
    <span>共 200 条</span>
    <ul>
      <li><i class="bi bi-chevron-left"></i></li>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>...</li>
      <li><i class="bi bi-chevron-right"></i></li>
    </ul>
  </div>
  <div class="progress">
    <div class="progress_line">
      <div class="progress_line_inner" style="width: 25%"></div>
    </div>
    <div class="progress_text">25%</div>
  </div>
  <div class="projectDynamic">
    <div class="itemDynamic">
      <div class="itemDynamic_date"><i class="bi bi-clock dateIcon"></i>2022-11-20 07:30</div>
      <div class="itemDynamic_text">
        <div class="itemDynamic_text_content">项目管理系统建设项目<span class="dynamicUpdate">更新了需求</span></div>
      </div>
    </div>
  </div>
  <div class="itemUpdatePro">
    <div class="itemUpdatePro_title">
      <div class="pro_title_text"><img src="./common/img/dialogTitle.png" width="20px" height="20px" />基层治理协同协同项目
      </div>
      <div class="pro_title_date">2021-10-20至2022-10-30</div>
    </div>
    <div class="itemUpdatePro_info">
      <div class="info_item">
        <div class="info_item_box">
          <div class="info_item_box_tip">商务经理</div>
          <div class="info_item_box_text">某某某</div>
        </div>
        <div class="info_item_box">
          <div class="info_item_box_tip">项目类型</div>
          <div class="info_item_box_text">软硬件项目</div>
        </div>
        <div class="info_item_box">
          <div class="info_item_box_tip">重要程度</div>
          <div class="info_item_box_text">----</div>
        </div>
      </div>
      <div class="info_item">
        <div class="info_item_box">
          <div class="info_item_box_tip">售前经理</div>
          <div class="info_item_box_text">某某某</div>
        </div>
        <div class="info_item_box">
          <div class="info_item_box_tip">项目方向</div>
          <div class="info_item_box_text">软硬件项目</div>
        </div>
        <div class="info_item_box">
          <div class="info_item_box_tip">紧急程度</div>
          <div class="info_item_box_text">----</div>
        </div>
      </div>
      <div class="info_item">
        <div class="info_item_box">
          <div class="info_item_box_tip">项目经理</div>
          <div class="info_item_box_text">某某某</div>
        </div>
        <div class="info_item_box">
          <div class="info_item_box_tip">项目状态</div>
          <div class="info_item_box_text">软硬件项目</div>
        </div>
        <div class="info_item_box">
          <div class="info_item_box_tip">项目阶段</div>
          <div class="info_item_box_text">----</div>
        </div>
      </div>
      <div class="info_item">
        <div class="info_item_box">
          <div class="info_item_box_tip">时间进度</div>
          <div class="info_item_box_text info_item_box_progress">
            <div class="progress">
              <div class="progress_line">
                <div class="progress_line_inner" style="width: 25%"></div>
              </div>
              <div class="progress_text">25%</div>
            </div>
          </div>
        </div>
        <div class="info_item_box">
          <div class="info_item_box_tip">自评进度</div>
          <div class="info_item_box_text info_item_box_progress">
            <div class="progress">
              <div class="progress_line">
                <div class="progress_line_inner" style="width: 25%"></div>
              </div>
              <div class="progress_text">25%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br />
  <input class="checkbox" type="checkbox" checked="true" />
  <!-- 树形组件 -->
  <div style="display:flex;">
    <div style="width:50%">
      <div id="tree" class="tree"></div>
    </div>
    <div style="width:50%">
      <div id="tree2" class="tree"></div>
    </div>
  </div>

  <div class="pageCoommon" style="padding: 20px;background: aquamarine;">
    <!-- 不区分上下块页面  父级暂无高度-->
    <div class="XXXXXpage itemBoxContent"></div>
    <br />
    <!-- 区分上下块页面  父级暂无高度-->
    <div class="XXXXXpage">
      <div class="topBox itemBoxContent"></div>
      <div class="bottomBox itemBoxContent"></div>
    </div>
  </div>
  <!-- 右侧按钮居中对齐 -->
  <div class="detailPage_info alignCenter">
    <div class="leftInfo">
      <div class="item_info">
        <div class="item_info_tips">项目名称</div>
        <div class="item_info_text">项目名称项目名称项目名称</div>
      </div>
      <div class="item_info">
        <div class="item_info_tips">申请人</div>
        <div class="item_info_text">XXX</div>
      </div>
      <div class="item_info">
        <div class="item_info_tips">不通过原因</div>
        <div class="item_info_text no_pass_reson">项目名称项目名称项目名称</div>
      </div>
    </div>
    <div class="rightAllAction">
      <button class="button_primary_plain">立项申请</button>
      <button class="button_primary_plain">自评进度</button>
      <button class="button_success_plain">完成/关闭</button>
      <button class="button_error">删除</button>
    </div>
  </div>
  <!-- 右侧按钮居下对齐 -->
  <div class="detailPage_info alignBottom">
    <div class="leftInfo">
      <div class="item_info">
        <div class="item_info_tips">项目名称</div>
        <div class="item_info_text">项目名称项目名称项目名称</div>
      </div>
      <div class="item_info">
        <div class="item_info_tips">申请人</div>
        <div class="item_info_text">XXX</div>
      </div>
      <div class="item_info">
        <div class="item_info_tips">审核人</div>
        <div class="item_info_text info_checker">
          <div class="itemChecker">
            <div class="checkerName"><i class="bi bi-check-circle-fill check_icon check_icon_pass"></i>李毅志通过</div>
            <div class="checkerLine"></div>
            <div class="checkerSign">
              签名：<img src="" alt="" width="66px" height="22px">
            </div>
          </div>
          <div class="checkerArrow">
            <i class="bi bi-arrow-right"></i>
          </div>
          <div class="itemChecker">
            <div class="checkerName"><i class="bi bi-three-dots check_icon check_icon_waring"></i>李毅志待审核
            </div>
            <div class="checkerLine"></div>
            <div class="checkerSign">
              签名：<img src="" alt="" width="66px" height="22px">
            </div>
          </div>
          <div class="checkerArrow">
            <i class="bi bi-arrow-right"></i>
          </div>
          <div class="itemChecker">
            <div class="checkerName"><i class="bi bi-x-circle-fill check_icon check_icon_error"></i>李毅志不通过</div>
            <div class="checkerLine"></div>
            <div class="checkerSign">
              签名：<img src="" alt="" width="66px" height="22px">
            </div>
          </div>
        </div>
      </div>
      <div class="item_info">
        <div class="item_info_tips">不通过原因</div>
        <div class="item_info_text no_pass_reson">项目名称项目名称项目名称</div>
      </div>
    </div>
    <div class="rightAllAction">
      <button class="button_success">通过</button>
      <button class="button_warning">不通过</button>
    </div>
  </div>
</body>
<script type="module">
  import message from '../common/js/message.js'
  window.message = message
  import Tree from '../common/js/tree.js'
  window.tree = new Tree({
    el: '#tree2',
    isCheckBox: true,
    all: true,
    checkedIds: [467788487,664395115],
    click: (e) => {
      console.log(e);
    },
    data: [
        {
            "id":467788487,
            "name":"产品部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":true,
            "child":[
                {
                    "id":664395115,
                    "name":"设计部",
                    "parent_id":467788487,
                    "create_at":"2022-12-30 14:22:18",
                    "update_at":"2022-12-30 14:22:18",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false,
                }
            ],
            "children":[
                {
                    "id":664395115,
                    "name":"设计部",
                    "parent_id":467788487,
                    "create_at":"2022-12-30 14:22:18",
                    "update_at":"2022-12-30 14:22:18",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ]
        },
        {
            "id":467788489,
            "name":"技术部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":true,
            "child":[
                {
                    "id":739635180,
                    "name":"测试部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":741932102,
                    "name":"技术二部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":742042063,
                    "name":"技术一部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ],
            "children":[
                {
                    "id":739635180,
                    "name":"测试部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":741932102,
                    "name":"技术二部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":742042063,
                    "name":"技术一部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ]
        },
        {
            "id":468747310,
            "name":"行政部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:19",
            "update_at":"2022-12-30 14:22:19",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":468747326,
            "name":"人事部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469210295,
            "name":"财务部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469279273,
            "name":"项目部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469701264,
            "name":"企宣部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469721282,
            "name":"总经办",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469910190,
            "name":"投标部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":470578157,
            "name":"邻家小达",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":true,
            "child":[
                {
                    "id":469372326,
                    "name":"技术部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":true,
                    "child":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false,
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false,
                        }
                    ],
                    "children":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        }
                    ]
                },
                {
                    "id":471733049,
                    "name":"产品运营部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":478154343,
                    "name":"商务部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":662495091,
                    "name":"项目部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:22",
                    "update_at":"2022-12-30 14:22:22",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ],
            "children":[
                {
                    "id":469372326,
                    "name":"技术部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":true,
                    "child":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        }
                    ],
                    "children":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        }
                    ]
                },
                {
                    "id":471733049,
                    "name":"产品运营部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":478154343,
                    "name":"商务部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":662495091,
                    "name":"项目部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:22",
                    "update_at":"2022-12-30 14:22:22",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ]
        },
        {
            "id":612586095,
            "name":"售前部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:17",
            "update_at":"2022-12-30 14:22:17",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":664206161,
            "name":"外派驻点人员",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:22",
            "update_at":"2022-12-30 14:22:22",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":709338045,
            "name":"蜻蜓到家",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:22",
            "update_at":"2022-12-30 14:22:22",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        }
    ]
  })
  setTimeout(() => {
    console.log(tree.getCheckBox());
  }, 8000)
  new Tree({
    el: '#tree',
    isCheckBox: false,
    click: (e) => {
      console.log(e);
    },
    data:
    [
        {
            "id":467788487,
            "name":"产品部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":true,
            "child":[
                {
                    "id":664395115,
                    "name":"设计部",
                    "parent_id":467788487,
                    "create_at":"2022-12-30 14:22:18",
                    "update_at":"2022-12-30 14:22:18",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false,
                }
            ],
            "children":[
                {
                    "id":664395115,
                    "name":"设计部",
                    "parent_id":467788487,
                    "create_at":"2022-12-30 14:22:18",
                    "update_at":"2022-12-30 14:22:18",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ]
        },
        {
            "id":467788489,
            "name":"技术部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":true,
            "child":[
                {
                    "id":739635180,
                    "name":"测试部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":741932102,
                    "name":"技术二部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":742042063,
                    "name":"技术一部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ],
            "children":[
                {
                    "id":739635180,
                    "name":"测试部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":741932102,
                    "name":"技术二部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":742042063,
                    "name":"技术一部",
                    "parent_id":467788489,
                    "create_at":"2022-12-30 14:22:19",
                    "update_at":"2022-12-30 14:22:19",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ]
        },
        {
            "id":468747310,
            "name":"行政部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:19",
            "update_at":"2022-12-30 14:22:19",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":468747326,
            "name":"人事部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469210295,
            "name":"财务部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469279273,
            "name":"项目部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469701264,
            "name":"企宣部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469721282,
            "name":"总经办",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":469910190,
            "name":"投标部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:18",
            "update_at":"2022-12-30 14:22:18",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":470578157,
            "name":"邻家小达",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:20",
            "update_at":"2022-12-30 14:22:20",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":true,
            "child":[
                {
                    "id":469372326,
                    "name":"技术部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":true,
                    "child":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false,
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false,
                        }
                    ],
                    "children":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        }
                    ]
                },
                {
                    "id":471733049,
                    "name":"产品运营部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":478154343,
                    "name":"商务部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":662495091,
                    "name":"项目部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:22",
                    "update_at":"2022-12-30 14:22:22",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ],
            "children":[
                {
                    "id":469372326,
                    "name":"技术部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":true,
                    "child":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        }
                    ],
                    "children":[
                        {
                            "id":709275649,
                            "name":"前端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        },
                        {
                            "id":709500056,
                            "name":"后端组",
                            "parent_id":469372326,
                            "create_at":"2022-12-30 14:22:21",
                            "update_at":"2022-12-30 14:22:21",
                            "delete_at":null,
                            "level":3,
                            "spread":false,
                            "vue_disabled":false,
                            "is_has_child":false
                        }
                    ]
                },
                {
                    "id":471733049,
                    "name":"产品运营部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":478154343,
                    "name":"商务部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:21",
                    "update_at":"2022-12-30 14:22:21",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                },
                {
                    "id":662495091,
                    "name":"项目部",
                    "parent_id":470578157,
                    "create_at":"2022-12-30 14:22:22",
                    "update_at":"2022-12-30 14:22:22",
                    "delete_at":null,
                    "level":2,
                    "spread":false,
                    "vue_disabled":false,
                    "is_has_child":false
                }
            ]
        },
        {
            "id":612586095,
            "name":"售前部",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:17",
            "update_at":"2022-12-30 14:22:17",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":664206161,
            "name":"外派驻点人员",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:22",
            "update_at":"2022-12-30 14:22:22",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        },
        {
            "id":709338045,
            "name":"蜻蜓到家",
            "parent_id":1,
            "create_at":"2022-12-30 14:22:22",
            "update_at":"2022-12-30 14:22:22",
            "delete_at":null,
            "level":1,
            "spread":false,
            "vue_disabled":false,
            "is_has_child":false
        }
    ]
  })
  document.querySelectorAll('.add').forEach(item => {
    item.addEventListener('click', (e) => {
      e.stopPropagation();
      console.log(item, item.getAttribute('data'));
    })
  })
  document.querySelectorAll('.edit').forEach(item => {
    item.addEventListener('click', (e) => {
      e.stopPropagation();
      console.log(item, item.getAttribute('data'));
    })
  })
</script>